<template>
  <div class="container">
    <div class="top" :style="dataBg">
      <div class="item" @click="showTable(10)">
        <div class="iten_son" :style="green">
          <div class="green">{{ data.codeGreen }}</div>
        </div>
        <div class="green">绿码</div>
      </div>
      <div class="item" @click="showTable(11)">
        <div class="iten_son" :style="yellow">
          <div class="yellow">{{ data.codeYellow }}</div>
        </div>
        <div class="yellow">黄码</div>
      </div>
      <div class="item" @click="showTable(12)">
        <div class="iten_son" :style="red">
          <div class="red">{{ data.codeRed }}</div>
        </div>
        <div class="red">红码</div>
      </div>

      <div class="item" @click="showTable(13)">
        <div class="iten_son" :style="note">
          <div style="color:#0071F9; font-size: 14px;">
            {{ data.codeEmpty }}
          </div>
        </div>
        <div
          style="color:#0071F9; font-size: 14px; height: 30px;
  line-height: 30px;"
        >
          待完善
        </div>
      </div>
    </div>
    <rz-height></rz-height>
    <div id="main_right" style="width: 100%; height: 300px"></div>
    <rz-height></rz-height>
    <div id="main_chart" style="width: 100%; height: 220px"></div>
    <!-- <query-dialog
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      width="80%"
      title="查看"
      @onconfirm="onconfirm"
      @oncancel="onconfirm"
      :type="type"
       :districtcode="districtcode"
    >
    </query-dialog> -->
  </div>
</template>
<script>
var echarts = require('echarts');
export default {
  // props:[],
  props: {
    code: {
      type: String,
      default: '',
    },
  },
  // 页面加载
  created() {
    if (this.code) {
      this.districtcode = this.code;
    }
  },
  // 页面加载完成
  mounted() {
    this.queryInfo();
    // 饼图
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      data: {},
      note: {
        backgroundImage: 'url(' + require('@/assets/images/perfect.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },
      red: {
        backgroundImage: 'url(' + require('@/assets/images/red.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },
      yellow: {
        backgroundImage: 'url(' + require('@/assets/images/yellow.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },
      green: {
        backgroundImage: 'url(' + require('@/assets/images/green.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },
      dataBg: {
        backgroundColor: 'rgba(32,72,136,.3)',
        // backgroundImage: "url(" + require("@/assets/images/dataBg.png") + ")",
        // backgroundRepeat: "no-repeat",
        // backgroundSize: "100% 100%",
      },
      myChart: '',
      myChartColumnar: '',
      dialogVisible: false,
      type: 0,
      districtcode: '',
    };
  },
  // 方法
  methods: {
    pieChart() {
      // 饼图
      this.myChart = echarts.init(
        document.getElementById('main_chart'),
        'dark'
      );
      let option = {
        title: {
          top: 12,
          text: '各区注册单位数',
          //  subtext: '各区注册单位数',
          left: 'center',
          textStyle: {
            fontSize: 16,
          },
        },
        backgroundColor: 'rgba(32,72,136,.3)',
        tooltip: {
          trigger: 'item',
          // formatter: "{a} <br/>{b} : {c} ({d}%)",
          formatter: function(e) {
            return (
              e.data.bodyindustry + e.value + '(' + e.percent + '%)' + '家'
            );
          },
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        //   data: ["姑苏区", "工业园区", "相城区", "昆山市","常熟","张家港市","吴江","吴中","高新"],

        //   textStyle: {
        //     color: "white",
        //   },
        // },
        series: [
          {
            name: '注册占比',
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['50%', '65%'],
            data: this.data.cpyInfoList.filter(x => {
              if (x.count) {
                x.name = x.bodyindustry + x.count + '家';
                x.value = x.count;
                return x;
              }
            }),

            // [
            //   { value: 335, name: "姑苏区" },
            //   { value: 310, name: "工业园区" },
            //   { value: 234, name: "相城区" },
            //   { value: 935, name: "昆山市" },
            //   { value: 935, name: "常熟" },
            //   { value: 935, name: "张家港市" },
            //   { value: 935, name: "吴江" },
            //   { value: 935, name: "吴中" },
            //   { value: 935, name: "高新" },
            // ]

            emphasis: {},
            label: {
              color: '#fff',
            },
            //
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    Columnar() {
      let maxdata = [
        this.data.jKRed,
        this.data.jKYellow,
        this.data.jKGreen,
        this.data.kSRed,
        this.data.kSYellow,
        this.data.kSGreen,
        this.data.dabhGreen,
        this.data.dabhRed,
        this.data.dabhYellow,
      ];
      this.myChartColumnar = echarts.init(
        document.getElementById('main_right')
      );
      var option = {
        title: {
          top: 13,
          text: '信息码状态分析',
          //  subtext: '各区注册单位数',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#ffffff',
            height: 50,
          },
        },
        backgroundColor: 'rgba(32,72,136,.3)',
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          top: '15%',
          data: ['未到期', '即将到期', '已到期', '待完善'],
          textStyle: {
            color: 'white',
          },
        },
        toolbox: {
          show: false,
          feature: {
            dataView: {
              show: true,
              readOnly: false,
            },
            magicType: {
              show: true,
              type: ['bar'],
            },
            restore: {
              show: true,
            },
            saveAsImage: {
              show: true,
            },
          },
        },
        calculable: true,
        xAxis: [
          {
            axisLine: {
              lineStyle: {
                color: 'white', //坐标轴的颜色
              },
            },
            type: 'category',
            data: ['身份证', '健康证明', '安全考试'],
          },
        ],
        grid: {
          left: '20%',
          bottom: '8%',
          top: '35%',
        },
        yAxis: [
          {
            type: 'value',
            name: '人数',
            // min: 0,
            // max: Math.max(...maxdata),
            // interval: Math.max(...maxdata)/10,
            axisLabel: {
              // textStyle: {
              //   color: "white", //坐标的字体颜色
              // },
              formatter: '{value} ',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'white', //坐标轴的颜色
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],

        series: [
          {
            name: '未到期',
            type: 'bar',
            data: [this.data.dabhGreen, this.data.jKGreen, this.data.kSGreen],
            barWidth: 15,
            color: ['#008000'],
            label: {
              show: true,
              position: 'top',
              color: '#fff',
            },
          },

          {
            name: '即将到期',
            type: 'bar',
            data: [
              this.data.dabhYellow,
              this.data.jKYellow,
              this.data.kSYellow,
            ],
            barWidth: 15,
            color: ['#FFD700'],
            label: {
              show: true,
              position: 'top',
              color: '#fff',
            },
          },
          {
            name: '已到期',
            type: 'bar',
            data: [
              this.data.dabhRed,
              this.data.jKRed,
              this.data.kSRed,
              // this.data.dabhYellow,
              // this.data.dabhGreen,
            ],
            barWidth: 15,
            color: ['#FF0000'],
            label: {
              show: true,
              position: 'top',
              color: '#fff',
            },
          },
          {
            name: '待完善',
            type: 'bar',
            data: [this.data.dabhEmpty, this.data.jKEmpty, this.data.kSEmpty],
            barWidth: 15,
            color: ['#0071F9'],
            label: {
              show: true,
              position: 'top',
              color: '#fff',
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.myChartColumnar.setOption(option);
    },
    queryInfo() {
      this.$http
        .queryInfo({
          code: this.code,
        })
        .then(res => {
          if (res.code == 200) {
            this.data = res.data;
            this.pieChart();
            this.Columnar();
          } else {
            this.$error(res.msg);
          }
        })
        .catch(err => {
          this.$error();
          console.log(err);
        });
    },
    onconfirm() {
      this.dialogVisible = false;
    },
    showTable(e) {
      // this.type=e
      //  this.dialogVisible = true;
      this.$router.push({
        name: 'query',
        query: { code: this.code, type: e + '' },
      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    // "query-dialog": () => import("@/views/monitoring/components/query"),
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  .top {
    padding: 10px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 120px;
      flex: 1;
      cursor: pointer;
      // max-width: 100px;
      .iten_son {
        min-width: 75px;
        min-height: 75px;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        color: #4adefe;
        font-size: 12px;
        border-radius: 50%;
        // border: 5px  solid #62BCE1;
      }
    }
  }
  .red {
    color: #ff0000;
    font-size: 14px;
    text-align: center;
    height: 30px;
    line-height: 30px;
  }
  .yellow {
    color: #ffd700;
    font-size: 14px;
    text-align: center;
    height: 30px;
    line-height: 30px;
  }
  .green {
    color: #08e80f;
    font-size: 14px;
    text-align: center;
    height: 30px;
    line-height: 30px;
  }
}
</style>
